<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <div class="box">
        <h3>标题是：{{ title }} </h3>
        <p>{{ des }}</p>
        <p> {{ name }}</p>
    </div>



    <h1>{{title}}</h1>


    <script>

        // 约定
        //    {{}}  里面的内容会读取js中的数据

        //    获取标签里面的内容
        //    把标签里面的{{}} 替换成对应的数据
        //    重新渲染一下



        const obj = {
            title: '数据劫持真简单啊',
            des: '原来都是假的',
            name: '哈哈哈'

        }

        render('.box', obj)


        function render(el) {
            const oBox = document.querySelector(el);
            let html = oBox.innerHTML;
            console.log(html);

            // 正则   
            //     匹配双大括号  
            //     允许有空格或者没有空格
            //     子正则  --- 也就是双大括号里面的内容
            const reg = /{{\s*(\w+)\s*}}/g;

            const arr = html.match(reg);

            console.log(arr);

            arr.forEach(item => {
                const key = reg.exec(html)[1];
                console.log(key);
                html = html.replace(/{{\s*(\w+)\s*}}/, obj[key])
            })
            console.log(html);

            oBox.innerHTML = html;

        }



    </script>


</body>

</html>